<template>
  <div class="mt20" v-if="$route.query.status!=51">
        <p class="title">{{$t('serviceManage.telRmindRecord')}}</p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="mt20">
            <el-form-item :label="$t('yn.no33')" prop="userPhone">
                <el-input  size="small" :style="{width:'200px'}" v-model="ruleForm.userPhone" :maxlength='11'/>
            </el-form-item>
            <el-form-item :label="$t('operationDetail.no23')" prop="status">
            <el-select size="small" v-model="ruleForm.status" :placeholder="$t('public.placeholder')">
                <el-option v-for="item in options1" :key="item.value" :label="$t(item.label)" :value="item.value">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item :label="$t('operationDetail.no24')" prop="promise">
            <el-radio-group v-model="ruleForm.promise">
                <el-radio :label="1">
                <span>{{$t('operationDetail.no11')}}</span>
                </el-radio>
                <el-radio :label="-1">
                <span>{{$t('operationDetail.no12')}}</span>
                </el-radio>
            </el-radio-group>
            </el-form-item>
            <template v-if="ruleForm.promise == 1">
            <el-form-item :label="$t('operationDetail.no26')" required>
                <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker 
                    type="date" 
                    value-format="yyyy-MM-dd" 
                    :placeholder="$t('operationDetail.no27')" 
                    v-model="ruleForm.promiseTime">
                    </el-date-picker>
                </el-form-item>
                </el-col>
            </el-form-item>
            </template>
            <el-form-item :label="$t('public.no38')" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark" :rows="4" maxlength="600"></el-input>
            </el-form-item>
            <el-form-item>
            <template v-if="true">
                <el-button type="primary" @click="submitForm('ruleForm')">{{$t('operationDetail.no22')}}</el-button>
            </template>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {// 电话催收模块
            orderId:this.$route.query.orderId,
            userName: this.$route.query.userName,
            userPhone: '',
            status: '',
            promise: '',
            promiseTime: '',
            remark: ''
        },
        rules: {// 电话催收表单验证项
            userPhone: [
                { required: true, message: this.$t('operationDetail.no44'), trigger: 'blur' }
            ],
            status: [
                { required: true, message: this.$t('operationDetail.no20'), trigger: 'change' }
            ],
            promise: [
                { required: true, message: this.$t('operationDetail.no21'), trigger: 'change' }
            ],
            remark: [
             { required: true, message: this.$t('loanMoney.placeholder'), trigger: 'blur' }
            ]
        },
        options1:this.$store.state.options.notice_option2,
      }
    },
    methods: {
      submitForm (formName) { // 获取初审列表数据
        this.$refs[formName].validate((valid) => {
            if (valid) {
                let option = {
                    param: {
                    ...this.ruleForm
                    }       
                }
                this.$axios.post(this.$action.remind_recordSave, option).then(res => {
                    if (res.code == 200) {
                        this.$globalMsg.success(res.message)
                        setTimeout(() => {
                            this.$router.push('/myremindlist');
                        }, 1000)
                    }else{
                        this.$globalMsg.error(res.message)
                    }
                })
            }
        })
      }
    }
  }
</script>